<template>
  <div>
    <home />
    <carousel-view/>
      <el-divider content-position="center" style="margin: 0 auto;width: 50px;height: 5px;background-color: #1f2937;margin-top: 20px" />
      <div style="text-align: center;margin-top: 10px;margin-bottom: 10px;font-size: 20px;font-weight: bold">大赛通知</div>
    <div class="counts">
      <el-button type="warning" link @click="Information(0)">查看更多 >></el-button>
    </div>
    <div style="margin-top: 10px">
      <div class="count" style="display: flex; flex-wrap: nowrap; justify-content: center;">
        <el-card @click="openCement(item)" v-for="(item,index) in data" :key="index" :body-style="{ padding: '0' }"
                 style="flex: 1 0 24%; max-width: 40%; margin: 0 1%; box-sizing: border-box;">
          <div style="display: flex">
            <div style="width: 40%;">
              <img v-if="item.imgUrl" style="width: 100%;height: 150px" :src="item.imgUrl">
            </div>
            <div style="padding: 10px">
              <div style="height: 90%">
                <div style="font-weight: bold;font-size: 18px">{{ item.title }}</div>
                <p style="margin-top: 2px">{{ item.content }}</p>
              </div>
              <div style="color: #8c939d">{{ item.createTime }}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div>
      <div class="count" style="display: flex; flex-wrap: nowrap; justify-content: center;">
        <el-card @click="openCement(item)" v-for="(item,index) in data1" :key="index" :body-style="{ padding: '0' }"
                 style="flex: 1 0 24%; max-width: 40%; margin: 0 1%; box-sizing: border-box;">
          <div style="display: flex">
            <div style="width: 40%;">
              <img v-if="item.imgUrl" style="width: 100%;height: 150px" :src="item.imgUrl">
            </div>
            <div style="padding: 10px">
              <div style="height: 90%">
                <div style="font-weight: bold;font-size: 18px">{{ item.title }}</div>
                <p style="margin-top: 2px">{{ item.content }}</p>
              </div>
              <div style="color: #8c939d">{{ item.createTime }}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="student-info">
      <div style="padding: 15px">
        <el-divider content-position="center" style="margin: 0 auto;width: 50px;height: 5px;background-color: white;" />
      </div>
      <div style="text-align: center;margin-bottom: 10px;font-size: 20px;font-weight: bold;color: white;">省市高校动态</div>
      <div class="counts">
        <el-button type="warning" style="color: white" link @click="Information(1)">查看更多 >></el-button>
      </div>
      <div style="display: flex; justify-content: space-between;">
        <el-row :gutter="16" class="dashboard-console-grid" style="justify-content: center;margin-bottom: 10px">
            <el-col v-bind="grid" class="ivu-mb" v-for="(item,index) in cementData" :key="index"
                    style="display: flex; justify-content: center;">
              <el-card @click="openCement(item)" :body-style="{ padding: '0' }" style="height: 40vh;margin-top: 10px" shadow="hover">
                <div>
                  <img :src="item.imgUrl" style="height: 20vh; width: 100%">
                </div>
                <div style="display: flex; align-items: center; justify-content: center; color: #8c939d; padding: 10px;">
                  {{item.createTime}}
                </div>
                <div>
                  <el-divider style="margin: 0 auto; width: 80%; height: 2px; background-color: #8c939d" />
                </div>
                <div style="padding: 20px">{{item.title}}</div>
              </el-card>
            </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script setup>
import home from '../welcome/Home.vue'
import {router} from "@/router";
import {ref} from "vue";
import CarouselView from '../welcome/CarouselView.vue'
import {cementPage} from '../welcome/welcomeApi.js'
import {useUserStore} from "@/pinia/stores/user";
import {openCement} from  "./welcomeApi.js"
import {Vue3Marquee} from "vue3-marquee";
const userStore = useUserStore()
const userData = userStore.userInfo
const data = ref([])
const data1 = ref([])
const grid = reactive({
  xl: 4,
  lg: 4,
  md: 6,
  sm: 6,
  xs: 6,
})
const cementData = ref([])
const form = reactive({
  title: '',
  type: '',
  status: '',
  userName: '',
  cementTypes: 0,
})
const cementAll = async () => {
  form.cementTypes=0;
  await cementPage(form,4,1).then(res=>{
    for (let i = 0; i < 2; i++) {
      data.value.push(res.data.records[i])
    }
    for (let i = 2; i < 4; i++) {
      data1.value.push(res.data.records[i])
    }
  }).catch(res=>{

  })
}
const getCementData = async () => {
  form.cementTypes=1;
  await cementPage(form,5,1).then(res=>{
    cementData.value = res.data.records;
  })
}
const Information = (index) => {
  router.push({
    path: '/Information',
    query: {
      cementType: index
    }
  })
}
const reviews = [
  { name: 'c***@msn.com', content: '从较低的上手难度，到完善的细节设计；从完善的示例，到详细而循序渐进的文档。无不体现作者作为一个技术专家之上的产品意识，这是诸多“开发框架”所达不到的理念高度。' },
  { name: 't***@126.com', content: '售后服务及时，耐心解答各种问题，源码讲解耐心，努力帮助客户了解系统架构，从而更好的服务客服体系，界面美观，集成快捷，非常棒的框架。' },
  { name: 'l***@163.com', content: '可以说是目前最简单、易上手的 Vue3 中后台框架，框架本身已经涵盖了开发中几乎所有的基础功能，可以让开发者更注重业务本身的开发。' },
  { name: '3***@qq.com', content: '无论从颜值、组件丰富程度来说都是非常优秀的，对后端开发十分友好，代码规范清晰，即便不是很熟悉前端的后端开发人员也能快速上手。' },
  { name: 't***@163.com', content: 'Fantastic-admin 的设计、交互都十分现代化，文档健全，售后及时，最重要的是，它几乎没有什么 Bug ，使用体验太丝滑了。' },
  { name: 'y***@163.com', content: '作为一个16年开发经验的老程序员，一看到这套框架就被深深的吸引，在对比开发成本和购买成本后，果断选择了专业版。' },
  { name: '4***@qq.com', content: '做为个人开发者，本人兼任前端和后端的工作。Fantastic-admin 拿来即用，解决了没有前端，没有美工的困扰。' },
  { name: 'b***@gmail.com', content: '我觉得 Fantastic-admin 最大的优势和吸引人的地方是产品性很强，前两年就买了专业版，一直在用。' },
  { name: 'r***@aliyun.com', content: '我是搞后端的，这个模板好好用，期待加入更多的页面可以直接用。' },
  { name: 'a***@163.com', content: '厉害👍🏻，是后台系统里见过最好的框架。' },
]
onMounted(() => {
  getCementData();
  cementAll();
})
</script>

<style scoped>
.count {
  /* 居中显示 */
  justify-content: center;
  /* 其他样式保持不变 */
  margin: 0 auto;
  margin-top: 10px;
  height: 150px;
}

.counts {
  text-align: right;
  margin-right: 9%;
  margin-top: -20px;
  color: #409eff;
  margin-bottom: 10px;
}
.student-info {
  margin-top: 15px;
  background: #1446a0;
}
.ivu-mb{
  margin-left: 10px;
}
.el-card {
  width: 300px; /* 固定卡片的宽度 */
}
</style>
